<script lang="ts">
  export default {
    name: 'Mine',
  };
</script>

<script setup lang="ts">
  import { computed, onMounted, ref, unref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import changeLang from '@/components/changeLang/index.vue'
  import { useI18n } from 'vue-i18n'
  import { useWebApp } from 'vue-tg'
  import tab1 from '@/assets/img/mine1.png'
  import tab2 from '@/assets/img/mine2.png'
  import tab3 from '@/assets/img/mine3.png'

  let user = ref({})
  onMounted(() => {
    let { initData, initDataUnsafe } = useWebApp()
    user.value = initDataUnsafe.user
  });

  const { t } = useI18n()
  const router = useRouter();

  let tabList = computed(() => {
    return [
      {
        id: 1,
        name: t('home.ExchangeRateInquiry'),
        url: tab1,
        path: '/exchangeRate'
      },
      {
        id: 2,
        name: t('home.membershipInquiry'),
        url: tab2,
        path: '/member'
      },
      {
        id: 3,
        name: t('home.LanguageSwitching'),
        url: tab3
      },
    ]
  }
  )
  let showPicker = ref(false)
  const goPage = (data) => {
    if (data.id == 3) {
      showPicker.value = true
    } else if (data.path) {
      router.push({
        path: data.path,
      })
    }

  }
  // 关闭弹出
  const closeC = (data) => {
    showPicker.value = false
  }
</script>

<template>
  <div class="container">
    <div class="user">
      <img src="@/assets/img/mineIcon.png" alt="" style="width: 60px;height: 60px;">
      <div style="font-weight: 700;font-size: 26px;">@{{user.username}}</div>
    </div>
    <div class="list">
      <br>
      <br>
      <div v-for="i in tabList" :key="i.id" @click="goPage(i)">
        <div class="listMean flex align-items jus-bet">
          <div class="flex align-items">
            <img :src="i.url" alt="" style="width: 20px;height: 20px;margin-right: 10px;">
            <span>{{i.name}}</span>
          </div>
          <div class="rightIcon">
          </div>
        </div>
        <van-divider dashed :style="{ borderColor: '#555555' }" />
      </div>
    </div>

    <changeLang :show="showPicker" @closeLan="closeC"></changeLang>
    <!-- 底部导航栏 -->
    <Tabbar />
  </div>
</template>

<style lang="less" scoped>
  .container {
    padding: 20px;
    background: url("@/assets/img/myBj.jpg")no-repeat;
    background-size: 100% 100%;

    .user {
      text-align: center;
      background-color: #fff;
      padding: 30px;
      border-radius: 12px;
    }

    .list {
      background-color: #fff;
      border-radius: 12px;
      height: 60vh;
      margin-top: 20px;
      padding: 20px;

      .listMean {}
    }

    .rightIcon {
      border: 1px solid #5a5a5a;
      width: 8px;
      height: 8px;
      border-top: transparent;
      border-left: transparent;
      transform: rotateZ(-45deg);
      margin-top: 6px;
    }
  }
</style>